<template>
    <div id="div33" style="width: 100%;height:30vh;margin-top: 20vh;"></div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';

onMounted(()=>{
 var myChart = echarts.init(document.getElementById('div33'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
type EChartsOption = echarts.EChartsOption;


var ROOT_PATH = 'https://echarts.apache.org/examples';



var chartDom = document.getElementById('div33')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
  backgroundColor: '#000',
  globe: {
    baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
    shading: 'lambert',
    environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
    atmosphere: {
      show: true
    },
    light: {
      ambient: {
        intensity: 0.01
      },
      main: {
        intensity: 1.5
      }
    }
  },
  series: []
};



option && myChart.setOption(option);


})

</script>